<!--updated at 2022/04/11-->
<template>
  <button
    class="zui-button"
    :class="[
      size,
      type,
      bold,
      round ? 'round' : '',
      circle ? 'circle' : '',
      disabled ? 'disabled' : '',
      loading ? 'loading' : '',
      noBorderRadius ? 'no-border-radius' : ''
    ]"
    :disabled="disabled || loading"
  >
    <svg v-if="loading" viewBox="25 25 50 50" class="van-loading">
      <circle cx="50" cy="50" r="20" fill="none"></circle>
    </svg>
    <slot v-else></slot>
  </button>
</template>

<script setup lang="ts">
defineProps({
  // 是否选用粗体
  bold: Boolean,
  // xlarge/large/(default)/small
  size: {
    type: String
  },
  // primary/secondary/[default]/link/success/danger
  type: String,
  // round
  round: Boolean,
  circle: Boolean,
  loading: Boolean,
  disabled: Boolean,
  noBorderRadius: Boolean
})
</script>

<style scoped lang="scss">
.van-loading {
  color: inherit;
  display: inline-block;
  margin-right: 4px;
  max-width: 100%;
  height: 50%;
  vertical-align: middle;
  max-height: 100%;
  -webkit-animation: van-rotate 2s linear infinite;
  animation: van-rotate 2s linear infinite;
}

.van-loading circle {
  -webkit-animation: van-circular 1.5s ease-in-out infinite;
  animation: van-circular 1.5s ease-in-out infinite;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
}

@keyframes van-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

@keyframes van-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.zui-button {
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--zui-color-border);
  border-radius: var(--zui-size-border-radius-regular);
  padding: 0 12px;
  background: #ffffff;
  font-size: var(--zui-size-text-regular);
  line-height: 32px;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s ease-int;
  color: var(--zui-color-text-regular);
  &:active:not(.disabled):not(.loading) {
    opacity: 0.49;
  }
  &.primary {
    border: none;
    box-shadow: var(--zui-box-shadow-colorful);
    color: #ffffff;
    background: var(--zui-color-primary);
  }
  &.secondary {
    border: 1px solid var(--zui-color-gray);
    color: var(--zui-color-text-primary);
    background: #ffffff;
    &.disabled {
      background-color: #ffffff;
      border: 1px solid var(--zui-color-gray-light);
    }
  }
  &.danger {
    border: none;
    box-shadow: 0 2px 6px 0px var(--zui-color-red-lighter);
    color: #ffffff;
    background: var(--zui-color-red);
  }
  &.success {
    border: none;
    box-shadow: 0 2px 6px 0px var(--zui-color-green-lighter);
    color: #ffffff;
    background: var(--zui-color-green);
  }
  &.round {
    border-radius: 18px;
  }
  &.circle {
    border-radius: 50%;
    padding: 0;
    width: 36px;
  }
  &.link {
    background: none;
    padding: 0;
    border: none;
    color: var(--zui-color-primary);
  }
  &.bold {
    font-weight: bold;
  }
  &.large {
    height: 40px;
    min-width: 88px;
    padding: 0 16px;
    font-size: var(--size-text-large);
    &.round {
      border-radius: 20px;
    }
    &.circle {
      border-radius: 50%;
      padding: 0;
      width: 40px;
    }
  }
  &.xlarge {
    height: 48px;
    line-height: 49px;
    font-size: var(--size-text-large);
    &.round {
      border-radius: 24px;
    }
    &.circle {
      border-radius: 50%;
      padding: 0;
      width: 48px;
    }
  }
  &.small {
    font-size: var(--zui-size-text-small);
    height: 28px;
    min-width: 10px;
    border-radius: var(--zui-size-border-radius-small);
    line-height: 28px;
    padding: 0 12px;
    &.round {
      min-width: 28px;
      border-radius: 14px;
      padding: 0 8px;
    }
    &.circle {
      border-radius: 50%;
      padding: 0;
      width: 28px;
    }
  }
  &.disabled {
    opacity: 0.3;
    border: none;
    box-shadow: none;
    cursor: not-allowed;
  }
  &.loading {
    box-shadow: none;
  }
  + .zui-button {
    margin-left: 8px;
  }
  &.no-border-radius {
    border-radius: 0;
  }
}
</style>
